<template>
  <div
    class="header"
   :style="{backgroundImage:'url(' + (info.head_pic_url) +')' }"
  >
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.back()"
      @click-right="1"
    />
      <div class="shop_header">
        <div class="title">
          <div class="left">
            <div class="imgbox">
              <img :src="info.picUrl" alt="" />
            </div>
            <h2>{{info.name}}</h2>
          </div>
          <div class="right">
            <span style="color:red" @click="cancel(info)" v-if="isCollection">❤</span>
            <span style="color:white" @click="add(info)" v-else>❤</span>
          </div>
        </div>
    
        <div class="btn">
          <span v-for="(item, index) in btn" :key="index" @click="active(index)" :class="{active:currentIndex == index}">{{ item }}</span>
        </div>
    
        <div class="card">
          <div class="send">商家配送{{info.deliveryTimeTip}} | 距离{{info.distance}}</div>
          <div class="volume">
            <span>￥7  </span>
            <van-icon name="gem" />
            <span> 无门槛 </span>
            <span>  | </span>
            <span>领取</span>
          </div>
          <span class="allowance"> 津贴 2元 </span>
          <div class="inform">
            <p>{{info.bulletin}}</p>
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import evenBus from "@/EvenBus/";
export default {
  data() {
    return {
      currentIndex:0,
      btn: ["搜索", "点餐", "评价", "商家"],
      info:{}
    };
  },
  methods:{
    active(index){
      this.currentIndex = index
    },
    add(info){
      this.$store.commit('collection',info)
    },
    cancel(info){
      this.$store.commit('cancel_collection',info)
    }
  },
  computed:{
    isCollection(){
      var index = this.$store.state.collectionList.findIndex((item)=>{
      return  item.mtWmPoiId == this.info.mtWmPoiId
      })
      return  index !== -1; 
    }
  },
  mounted(){
    evenBus.$on("title", (vla) => {
      console.log(vla);
      this.info = vla
    });
  },
};
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  background:no-repeat,center ;
  background-size: 100% 100%;
  // background-image: linear-gradient(to top,rgba(255,255,255,1), rgba(0,0,0,0));
  width: 100%;
  .van-nav-bar {
    background-color: rgba($color: #000000, $alpha: 0);
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0px;
  }
  .shop_header{
    // background: pink;
    margin:10px;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;
      .left{
        display: flex;
        align-items: center;
        .imgbox{
            width: 40px;
            margin-right: 15px;
          img{
            display: block;
            width: 100%;
            border-radius: 50%;
          }
        }
        h2{
          font-size: 18px;
          color: #eee;
          font-weight: normal;
        }
      }
      .right{
        font-size: 24px;
      }
    }
    .btn{
      color: #fff;
      margin-bottom: 15px;
      position: sticky;
      top: 0;
      span{
        margin-right: 20px;
        padding-bottom: 3px;
      }
      .active{
        font-weight: 700;
        border-bottom: 3px solid white;
      }
    }
    .card{
      background: white;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 5px 5px #f5f5f5;
      .send{
        font-size: 14px;
        color: #111;
        margin-bottom: 10px;
      }
      .volume{
        width: 180px;
        box-sizing: border-box;
        padding: 10px 15px;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #fee5b8;
        color: #222;
        span:first-child{
          font-weight: 700;
          font-size: 18px;
        }
        i,span:nth-child(3){
          font-size: 12px;
        }
        span:nth-child(4){
          margin: 0 5px;
        }
        span:last-child{
          font-size: 16px;
          font-weight: 600;
        }
      }
      .allowance{
        display: inline-block;
        box-sizing: border-box;
        padding: 3px 6px;
        font-size: 14px;
        color: red;
        background-color:lightpink;
        opacity: .8;
        margin-bottom: 10px;
      }
      .inform{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #999;
      }
    }
  }

}


// 导航栏的样式
::v-deep .van-nav-bar .van-icon {
  color: white;
}
::v-deep .van-nav-bar__text {
  color: white;
}
::v-deep .van-nav-bar__title {
  color: white;
}
</style>